/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  --yellow-highlight: #bb8e0c7a;
  --text-color: white;
  --docusaurus-highlighted-code-line-bg: rgba(104, 156, 106, 0.67);
  --bluegreen-highlight:  rgba(104, 156, 106, 0.67);
}
[data-theme='light'] {
  --yellow-highlight: rgb(255, 242, 204);
  --docusaurus-highlighted-code-line-bg: rgba(159, 238, 162, 0.67);
  --bluegreen-highlight:  rgba(159, 238, 162, 0.67);
} 

:root {
}

.consulting-gradient {
  background: -webkit-linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.consulting-gradient:hover {
  background: -webkit-linear-gradient(90deg, #ff0037 0%, #002aff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .consulting-gradient {
  transition: all 0.5s ease;
  background: -webkit-linear-gradient(90deg, #ff668b 0%, #5f7eff 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

[data-theme="dark"] .consulting-gradient:hover {
  background: -webkit-linear-gradient(90deg, #ffaaaa 0%, #aaaaff 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.yellow-highlight {
  background-color: var(--yellow-highlight);
  color: var(--text-color);
}
.bluegreen-highlight {
  background-color: var(--bluegreen-highlight);
}
/* Glossary and Tooltips */
div[role="tooltip"] {
  width: 450px;
  max-width: 90vw;
}
div[role="tooltip"] a {
  color: #ffffff;
  text-decoration: underline;
}
div[itemscope][itemtype*="DefinedTerm"] span[itemprop="description"] {
  color: var(--ifm-toc-link-color);
}
a[data-tooltip-html] {
  border-bottom: 1px dashed;
  cursor: help;
}
a[data-tooltip-html]:hover {
  text-decoration: none;
}
/* Code Block Word-Wrapping */
pre[class*="language-"] {
  white-space: pre-wrap;
}
pre {
  white-space: pre-wrap;
}

/* custom admonition */
.alert--takeaways {
  --ifm-alert-background-color: white; /* SteelBlue color with 50% opacity */
  --ifm-alert-background-color-highlight: rgba(70, 130, 180, 0.15); /* SteelBlue color with 15% opacity */
  --ifm-alert-foreground-color: rgb(66,69,73); /* Text color */
  --ifm-alert-border-color: #71b2e6; /* SteelBlue color */
}

html[data-theme='dark'] .alert--takeaways {
  --ifm-alert-background-color: rgba(169, 202, 235, 0.5); /* SteelBlue color with 50% opacity */
  --ifm-alert-background-color-highlight: rgba(70, 130, 180, 0.15); /* SteelBlue color with 15% opacity */
  --ifm-alert-foreground-color: rgb(255,255,255); /* Text color for dark theme */
  --ifm-alert-border-color: #4682B4; /* SteelBlue color */
}

.img-docs {
  border-radius: 5px;
  border: 1px solid grey;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  text-align: center
}

/* AIInput styles */
[data-theme='light'] .ai-input {
  background: #f0f0f0;
  color: #000;
}

[data-theme='dark'] .ai-input {
  background: #2a2a2a;
  color: #fff;
}

/* AIOutput styles */
[data-theme='light'] .ai-output {
  background: #f0f0f0;
  color: #000;
}

[data-theme='dark'] .ai-output {
  background: #2a2a2a;
  color: #fff;
}

[data-theme='light'] .io-icon {
  color: #000;
}

[data-theme='dark'] .io-icon {
  color: #fff;
}

[data-theme='light'] .output-highlight {
  background: lightgreen;
}

[data-theme='dark'] .output-highlight {
  background: #556B2F;
}

